<ng-template #itemTemplate let-item="item" let-index="index"><span>{{index}}: {{item.value}}</span></ng-template>

<div class="row">
  <div class="col-xs-6 col-6 col-md-5 col-lg-3">
    <bs-sortable
      [(ngModel)]="itemStringsLeft"
      [itemTemplate]="itemTemplate"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle text-center"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
  </div>
  <div class="col-xs-6 col-6 col-md-5 col-lg-3">
    <bs-sortable
      [(ngModel)]="itemStringsRight"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle text-center"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
  </div>
</div>

<div class='row'>
  <div class="col-xs-6 col-6 col-md-5 col-lg-3">
    <pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
  </div>

  <div class="col-xs-6 col-6 col-md-5 col-lg-3">
    <pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
  </div>
</div>

